<template>
  <div class="details" v-if="shopList">
    <div class="nav">
      <div class="left" @click="back"></div>
      <van-tabs
        v-model="active"
        scrollspy
        sticky
        line-width="28px"
        line-height="1px"
      >
        <van-tab title="商品">
          <div class="banner">
            <van-swipe class="my-swipe" indicator-color="white">
              <van-swipe-item
                v-for="(vl, i) in shopList[shopId].details.type[type].banner"
                :key="i"
              >
                <img :src="vl" alt="" />
              </van-swipe-item>
            </van-swipe>
          </div>
          <div class="text txt-cut line">
            <div class="title">
              {{ shopList[shopId].title }}
              <p>￥{{ shopList[shopId].price }}.00</p>
            </div>
            <div class="like" @click="islikeFun">
              <img
                v-show="!islike"
                src="http://www.hlamall.cn/img/mobile-site/detail/collect.png"
                alt=""
              />
              <img
                v-show="islike"
                src="http://www.hlamall.cn/img/mobile-site/detail/collected.png"
                alt=""
              />
            </div>
          </div>
          <div class="choose line" @click="show">
            尺码颜色选择
            <span>&gt;</span>
          </div>
        </van-tab>
        <van-tab title="详情">
          <div class="details_img">
            <img
              v-for="(vl, i) in shopList[shopId].details.detailsImg"
              :key="i"
              :src="vl"
              alt=""
            />
          </div>
        </van-tab>
        <van-tab title="评价">
          <div class="appraise line">
            <div class="title line">
              <p>用户评价(0)</p>
              <div class="left"></div>
            </div>
            <div class="content"></div>
          </div>
        </van-tab>
      </van-tabs>
    </div>

    <!-- 底部功能 -->
    <div class="bottom_bar line">
      <div class="left_btn">
        <div class="cust_ser line">
          <img
            src="http://www.hlamall.cn:80/img/mobile-site/detail/kfLogo.jpg"
            alt=""
          />
        </div>
        <router-link tag="div" to="/car" class="shop_car line">
          <div class="num">
            <span>{{ Usercar.length }}</span>
          </div>
          <img
            src="http://www.hlamall.cn/img/mobile-site/detail/shoppingLogo.jpg"
            alt=""
          />
        </router-link>
        <div class="like line" @click="islikeFun">
          <img
            v-show="!islike"
            src="http://www.hlamall.cn/img/mobile-site/detail/shoucangLogo.jpg"
            alt=""
          />
          <img
            v-show="islike"
            src="http://www.hlamall.cn/img/mobile-site/detail/shoucangLogo1.png"
            alt=""
          />
        </div>
      </div>
      <div class="right_btn">
        <div class="buy line" @click="buy">立即购买</div>
        <div class="add_car" @click="add_car">加入购物车</div>
      </div>
    </div>

    <!-- 弹出选择框 -->
    <div class="choose_bg" v-show="isShow">
      <div class="choose_box" ref="choose_box">
        <div class="header">
          <div class="img">
            <img :src="shopList[shopId].details.type[type].banner[0]" alt="" />
          </div>

          <div class="text">
            <div class="price">￥{{ shopList[shopId].price }}.00</div>
            <div class="num">
              库存：{{
                shopList[shopId].details.type[type].size[chooseIndex].num
              }}件
            </div>
            <div class="tips">已选：{{ shopList[shopId].title }}</div>
          </div>
        </div>
        <div class="content">
          <div class="title">尺码颜色</div>
          <div
            :class="['item', { con: i == chooseIndex }]"
            v-for="(vl, i) in shopList[shopId].details.type[type].size"
            :key="i"
            @click="sizeToggle(i, $event)"
          >
            {{ vl.title }}
          </div>
          <div class="type">
            <div
              :class="['item', { con: i == type }]"
              v-for="(vl, i) in shopList[shopId].details.type"
              :key="i"
              @click="typeToggle(i)"
            >
              {{ vl.name }}
            </div>
          </div>
        </div>
        <div class="close_btn" @click="hide()">
          <img
            src="	http://www.hlamall.cn/img/mobile-site/detail/close.jpg"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      isShow: false, //选框的显示隐藏
      shopList: null, //数据列表
      UserInfo: null, //用户数据
      Usercar: null, //用户的购物车
      UserLike: null, //用户收藏列表
      shopId: null, //商品在数据中对应的下标
      type: 0, //类型(默认为第一个)
      chooseIndex: 0, //选择尺寸的下标
      sizeChoose: null, //最后选择的尺寸
      typeChoose: null, //最后选择的类型
      num: null, //当前选择的库存
      islike: false, //当前商品是否收藏
    };
  },
  methods: {
    // 获取用户数据
    getUserInfoFun() {
      this.UserInfo = JSON.parse(sessionStorage.getItem("userInfo"));
      let user = localStorage.getItem("HL_user");
      if (user) {
        this.Usercar = this.UserInfo[user].car;
        this.UserLike = this.UserInfo[user].like;
        this.islike = this.UserLike.some((vl) => vl.id == this.$route.query.id);
      }
    },
    // 返回上一页
    back() {
      this.$router.back();
      this.$emit("show");
    },
    // 隐藏选项框
    hide() {
      this.isShow = false;
      clearTimeout();
      this.$refs.choose_box.style.bottom = -40 + "px";
      this.$refs.choose_box.style.opacity = 0.5;
    },
    // 显示选项框
    show() {
      this.isShow = true;
      setTimeout(() => {
        this.$refs.choose_box.style.bottom = 50 + "px";
        this.$refs.choose_box.style.opacity = 1;
      }, 10);
    },
    // 获取商品列表数据
    getShopListFun() {
      this.shopList = JSON.parse(sessionStorage.getItem("shopList"));

      this.shopId = this.shopList.findIndex(
        (i) => i.id == this.$route.query.id
      );
      //默认第一个类型
      this.typeChoose = this.shopList[this.shopId].details.type[0].name;

      //默认第一个类型的第一个尺寸
      this.sizeChoose =
        this.shopList[this.shopId].details.type[0].size[0].title;

      //默认第一个类型第一个尺寸的库存，用于添加购物车、收藏、立即购买等判断
      this.num = this.shopList[this.shopId].details.type[0].size[0].num;

      // console.log(this.shopList[this.shopId]);
    },
    // 选择尺寸
    sizeToggle(i) {
      this.chooseIndex = i;
      this.sizeChoose =
        this.shopList[this.shopId].details.type[this.type].size[i].title;
      this.num = this.shopList[this.shopId].details.type[this.type].size[i].num;
    },
    // 选择类型
    typeToggle(i) {
      this.type = i; //修改类型
      this.chooseIndex = 0; //切换类型的时候将选中尺寸的下标归零

      // 改变当前选择的类型
      this.typeChoose = this.shopList[this.shopId].details.type[this.type].name;

      // 当切换类型后改变当前选择的尺寸的库存为第一个尺寸的库存(尺寸同理)
      this.sizeChoose =
        this.shopList[this.shopId].details.type[this.type].size[0].title;
      this.num = this.shopList[this.shopId].details.type[this.type].size[0].num;
    },
    // 添加购物车
    add_car() {
      if (this.num) {
        // 寻找当前购物车中有没有相同尺寸的商品
        let sizeIndex = this.Usercar.findIndex(
          (vl) => vl.size == this.sizeChoose && vl.type == this.typeChoose
        );

        // 如果有相同的只需要数量加1
        if (
          sizeIndex != -1 &&
          this.Usercar[sizeIndex].type == this.typeChoose
        ) {
          // 但是需要判断库存是否足够
          if (this.num > this.Usercar[sizeIndex].toggleNum) {
            this.Usercar[sizeIndex].toggleNum += 1;

            this.$toast({
              message: "添加成功",
              position: "bottom",
            });
          } else {
            this.$toast({
              message: "库存不足",
              position: "bottom",
            });
          }
        } else {
          let id = this.$route.query.id;
          let imgUrl = this.shopList[this.shopId].imgUrl;
          let title = this.shopList[this.shopId].title;
          let price = this.shopList[this.shopId].price;

          // 添加数据到当前购物车数据中
          this.Usercar.push({
            id,
            imgUrl,
            title,
            price,
            size: this.sizeChoose, //当前选择尺寸
            type: this.typeChoose, //当前选择类型
            num: this.num, //当前选择的库存
            toggleNum: 1, //选择的数量more为1
            checked: false,
          });
          // 轻提示
          this.$toast({
            message: "添加成功",
            position: "bottom",
          });
        }

        this.setItem("userInfo", this.UserInfo);

        console.log(this.UserInfo);
      } else {
        this.$toast({
          message: "库存已空，换一件吧",
          position: "bottom",
        });
      }
    },
    // 修改数据
    setItem(item, newItem) {
      sessionStorage.setItem(item, JSON.stringify(newItem));
    },
    // 获取数据
    getItem(item) {
      JSON.parse(sessionStorage.getItem(item));
    },
    // 判断是否收藏
    islikeFun() {
      // 寻找当前商品在用户收藏列表中的下标
      let i = this.UserLike.findIndex((vl) => vl.id == this.$route.query.id);

      // 如果有就取消收藏
      if (i != -1) {
        this.islike = false;

        this.UserLike.splice(i, 1);

        this.setItem("userInfo", this.UserInfo);
      } else {
        //如果没有找到就添加
        this.islike = true;

        let id = this.$route.query.id;
        let imgUrl = this.shopList[this.shopId].imgUrl;
        let title = this.shopList[this.shopId].title;
        let price = this.shopList[this.shopId].price;
        this.UserLike.push({
          id,
          imgUrl,
          title,
          price,
          checked: false,
        });

        this.setItem("userInfo", this.UserInfo);
      }
    },
    // 立即购买
    buy() {
      if (this.num > 0) {
        let size = this.sizeChoose;
        let type = this.typeChoose;
        let id = this.$route.query.id;
        let infoList = [
          {
            id,
            size,
            type,
            num: 1,
          },
        ];
        this.$router.push({
          path: "/confirmOrder",
          query: {
            infoList: JSON.stringify(infoList),
          },
        });
      } else {
        this.$toast({
          message: "库存不足",
          position: "bottom",
        });
      }
    },
  },
  created() {
    this.$emit("hide");
    this.getShopListFun();
    this.getUserInfoFun();
  },
};
</script>

<style lang="scss" scoped>
$toast-max-width: 10%;

.details {
  position: relative;
}

.line::after {
  content: "";
  left: 0;
  bottom: 0;
  position: absolute;
  width: 100%;
  height: 1px;
  background: #ccc;
  transform: scaleY(0.5);
}

.nav {
  padding-bottom: 100px;

  .left {
    position: fixed;
    left: 13px;
    top: 5px;
    transform: scale(0.5);
    background: url("../assets/imgs/footer_ico.png") no-repeat -266px -9px;
    width: 18px;
    height: 32px;
    z-index: 1000;
  }

  &::v-deep .van-tabs {
    margin: 0 auto;

    .van-sticky {
      background: #fff;
      z-index: 999;
      border-bottom: 1px solid #dcdcde;

      .van-tabs__wrap {
        height: 40px;
        width: 110px;
        margin: auto;
        position: relative;

        .van-tabs__line {
          background: #000;
          bottom: 16px;
        }

        .van-tab {
          font-size: 13px;

          &.van-tab--active {
            // font-size: 20px;
            color: #000;
          }
        }
      }
    }

    .van-tabs__content {
      position: relative;
    }
  }

  .banner {
    img {
      width: 100%;
    }
  }

  .text {
    display: flex;
    padding: 20px 15px 28px;
    position: relative;
    box-sizing: border-box;

    > .title {
      flex: 1;
      font-size: 17px;
      line-height: 22px;
      min-width: 50px;

      > p {
        color: #9d7d61;
        height: 25px;
        line-height: 25px;
      }
    }

    > .like {
      width: 59px;

      > img {
        width: 17px;
        height: 15px;
        margin: 14px auto 0;
      }
    }
  }

  .choose {
    position: relative;
    height: 44px;
    line-height: 44px;
    display: flex;
    justify-content: space-between;
    padding: 0 14px;
  }

  .details_img {
    > img {
      width: 100%;
    }
  }

  .appraise {
    padding: 0 10px 12px;
    > .title {
      height: 34px;
      line-height: 34px;
      display: flex;
      justify-content: space-between;
      position: relative;

      > .left {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        left: unset;
        transform: scale(0.4) rotate(180deg);
        background: url("../assets/imgs/footer_ico.png") no-repeat -266px -9px;
        width: 18px;
        height: 32px;
      }
    }
  }
}

.bottom_bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  height: 50px;
  background: #fff;
  z-index: 101;

  &.line::after {
    top: 0;
  }

  .line::after {
    height: 100%;
    width: 1px;
    right: 0;
    left: unset;
    transform: scaleX(0.5);
  }

  > .left_btn {
    display: flex;

    > div {
      width: 47px;
      height: 100%;
      position: relative;

      > img {
        width: 18px;
        height: 18px;
        margin: 15px auto 0px;
        position: relative;
      }
    }

    > .shop_car .num {
      font-size: 10px;
      position: absolute;
      right: 10px;
      top: 10px;
      z-index: 10;
      width: 12px;
      height: 12px;
      line-height: 12px;
      text-align: center;
      border-radius: 50%;
      background: #b40510;
      color: #fff;

      > span {
        display: block;
        transform: scale(0.9);
      }
    }
  }

  > .right_btn {
    flex: 1;
    display: flex;

    > div {
      position: relative;
      width: 50%;
      height: 100%;
      line-height: 49px;
      text-align: center;
      font-size: 13px;

      &.add_car {
        height: 50px;
        background: #b40510;
        color: #fff;
      }
    }
  }
}

.choose_bg {
  position: fixed;
  width: 100%;
  height: calc(100% - 40px);
  bottom: 0;
  background-color: rgba($color: #000000, $alpha: 0.3);
  //   display: none;
  z-index: 100;

  > .choose_box {
    opacity: 0.5;
    position: absolute;
    bottom: -40px;
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 60px;
    background: #fff;
    transition: all 0.3s linear;
    border-top: 1px solid rgba($color: #fff, $alpha: 0.4);

    > .header {
      display: flex;

      > .img {
        width: 124px;
        height: 124px;
        margin: 0 10px;
        position: relative;

        > img {
          position: absolute;
          top: -15px;
          box-sizing: border-box;
          width: 100%;
          border: 2px solid #fff;
          border-radius: 4px;
        }
      }

      > .text {
        flex: 1;
        padding-right: 5px;
        padding-top: 25px;
        font-size: 12px;
        line-height: 22px;

        > .price {
          font-size: 12px;
          line-height: 16px;
          color: #b40510;
        }
      }
    }

    > .content {
      margin-top: 8px;
      padding: 0 15px;
      display: flex;
      flex-wrap: wrap;

      > .title {
        box-sizing: border-box;
        width: 100%;
        font-size: 16px;
        line-height: 16px;
        margin-bottom: 18px;
      }

      > .type > .item,
      > .item {
        padding: 10px;
        font-size: 12px;
        line-height: 12px;
        margin-right: 12px;
        margin-bottom: 10px;
        background: #f5f5f5;
        border-radius: 5px;

        &.con {
          background: #b40510;
          color: #fff;
        }
      }

      > .type {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        margin-top: 15px;
      }
    }

    .close_btn {
      position: absolute;
      top: 18px;
      right: 10px;
      width: 25px;
      height: 25px;

      > img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>